﻿'use client'

import { useState } from 'react'
import { Shuffle, RotateCcw, RefreshCw, Copy } from 'lucide-react'

export default function RandomStringGeneratorPage() {
  const [results, setResults] = useState<string[]>([])
  const [config, setConfig] = useState({
    length: 16,
    count: 1,
    includeUppercase: true,
    includeLowercase: true,
    includeNumbers: true,
    includeSymbols: false
  })

  const generateRandomString = (): string => {
    let charset = ''
    if (config.includeUppercase) charset += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
    if (config.includeLowercase) charset += 'abcdefghijklmnopqrstuvwxyz'
    if (config.includeNumbers) charset += '0123456789'
    if (config.includeSymbols) charset += '!@#$%^&*()_+-=[]{}|;:,.<>?'

    if (!charset) return 'Error: No character set selected'

    let result = ''
    for (let i = 0; i < config.length; i++) {
      result += charset.charAt(Math.floor(Math.random() * charset.length))
    }
    return result
  }

  const handleGenerate = () => {
    const newResults: string[] = []
    for (let i = 0; i < config.count; i++) {
      newResults.push(generateRandomString())
    }
    setResults(newResults)
  }

  const copyToClipboard = (text: string) => {
    navigator.clipboard?.writeText(text)
  }

  const copyAllResults = () => {
    navigator.clipboard?.writeText(results.join('\n'))
  }

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="max-w-4xl mx-auto">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">随机字符串生成器</h1>
          <p className="text-gray-600">生成自定义长度和字符集的随机字符串</p>
        </div>

        <div className="mb-6 flex gap-4">
          <button
            onClick={handleGenerate}
            className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center gap-2"
          >
            <Shuffle className="w-4 h-4" />
            生成字符串
          </button>
          <button
            onClick={handleGenerate}
            className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 flex items-center gap-2"
          >
            <RefreshCw className="w-4 h-4" />
            重新生成
          </button>
          <button
            onClick={copyAllResults}
            className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 flex items-center gap-2"
          >
            <Copy className="w-4 h-4" />
            复制全部
          </button>
          <button
            onClick={() => setResults([])}
            className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 flex items-center gap-2"
          >
            <RotateCcw className="w-4 h-4" />
            清空
          </button>
        </div>

        <div className="mb-6 bg-white p-4 rounded-lg border border-gray-200">
          <h4 className="font-medium text-gray-900 mb-3">配置选项</h4>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">字符串长度</label>
              <input
                type="number"
                value={config.length}
                onChange={(e) => setConfig(prev => ({ ...prev, length: parseInt(e.target.value) || 1 }))}
                min="1"
                max="128"
                className="w-full p-2 border border-gray-300 rounded-md"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">生成数量</label>
              <input
                type="number"
                value={config.count}
                onChange={(e) => setConfig(prev => ({ ...prev, count: parseInt(e.target.value) || 1 }))}
                min="1"
                max="100"
                className="w-full p-2 border border-gray-300 rounded-md"
              />
            </div>
          </div>
          
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <label className="flex items-center space-x-2">
              <input
                type="checkbox"
                checked={config.includeUppercase}
                onChange={(e) => setConfig(prev => ({ ...prev, includeUppercase: e.target.checked }))}
                className="w-4 h-4 text-blue-600 border-gray-300 rounded"
              />
              <span className="text-sm">大写字母 (A-Z)</span>
            </label>
            <label className="flex items-center space-x-2">
              <input
                type="checkbox"
                checked={config.includeLowercase}
                onChange={(e) => setConfig(prev => ({ ...prev, includeLowercase: e.target.checked }))}
                className="w-4 h-4 text-blue-600 border-gray-300 rounded"
              />
              <span className="text-sm">小写字母 (a-z)</span>
            </label>
            <label className="flex items-center space-x-2">
              <input
                type="checkbox"
                checked={config.includeNumbers}
                onChange={(e) => setConfig(prev => ({ ...prev, includeNumbers: e.target.checked }))}
                className="w-4 h-4 text-blue-600 border-gray-300 rounded"
              />
              <span className="text-sm">数字 (0-9)</span>
            </label>
            <label className="flex items-center space-x-2">
              <input
                type="checkbox"
                checked={config.includeSymbols}
                onChange={(e) => setConfig(prev => ({ ...prev, includeSymbols: e.target.checked }))}
                className="w-4 h-4 text-blue-600 border-gray-300 rounded"
              />
              <span className="text-sm">特殊符号</span>
            </label>
          </div>
        </div>

        <div className="mb-6">
          <label className="block text-sm font-medium text-gray-700 mb-2">生成的随机字符串</label>
          <div className="bg-white border border-gray-300 rounded-lg p-4 min-h-[200px]">
            {results.length > 0 ? (
              <div className="space-y-2">
                {results.map((result, index) => (
                  <div key={index} className="flex items-center justify-between p-2 bg-gray-50 rounded border">
                    <span className="font-mono text-sm flex-1 break-all">{result}</span>
                    <button
                      onClick={() => copyToClipboard(result)}
                      className="ml-2 p-1 text-gray-500 hover:text-gray-700"
                      title="复制"
                    >
                      <Copy className="w-4 h-4" />
                    </button>
                  </div>
                ))}
              </div>
            ) : (
              <div className="text-center text-gray-500 py-8">
                <Shuffle className="w-12 h-12 mx-auto mb-2 text-gray-300" />
                <p className="text-sm">随机字符串将在这里显示</p>
              </div>
            )}
          </div>
        </div>

        <div className="bg-gray-50 p-4 rounded-lg">
          <h4 className="font-medium text-gray-900 mb-2">快速预设</h4>
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <button
              onClick={() => setConfig(prev => ({ ...prev, length: 12, includeUppercase: true, includeLowercase: true, includeNumbers: true, includeSymbols: false }))}
              className="text-left p-3 bg-white rounded border hover:bg-gray-50"
            >
              <div className="font-medium text-sm">安全密码</div>
              <div className="text-xs text-gray-500 mt-1">12位字母数字组合</div>
            </button>
            <button
              onClick={() => setConfig(prev => ({ ...prev, length: 8, includeUppercase: true, includeLowercase: false, includeNumbers: true, includeSymbols: false }))}
              className="text-left p-3 bg-white rounded border hover:bg-gray-50"
            >
              <div className="font-medium text-sm">验证码</div>
              <div className="text-xs text-gray-500 mt-1">8位大写字母数字</div>
            </button>
            <button
              onClick={() => setConfig(prev => ({ ...prev, length: 32, includeUppercase: true, includeLowercase: true, includeNumbers: true, includeSymbols: false }))}
              className="text-left p-3 bg-white rounded border hover:bg-gray-50"
            >
              <div className="font-medium text-sm">API密钥</div>
              <div className="text-xs text-gray-500 mt-1">32位字母数字组合</div>
            </button>
            <button
              onClick={() => setConfig(prev => ({ ...prev, length: 16, includeUppercase: true, includeLowercase: true, includeNumbers: true, includeSymbols: true }))}
              className="text-left p-3 bg-white rounded border hover:bg-gray-50"
            >
              <div className="font-medium text-sm">强密码</div>
              <div className="text-xs text-gray-500 mt-1">16位包含特殊符号</div>
            </button>
          </div>
        </div>

        <div className="mt-6 bg-blue-50 p-4 rounded-lg">
          <h4 className="font-medium text-blue-900 mb-2">使用说明</h4>
          <ul className="text-blue-800 text-sm space-y-1">
            <li>• <strong>字符串长度:</strong> 设置生成的字符串长度 (1-128)</li>
            <li>• <strong>生成数量:</strong> 一次生成多个字符串 (1-100)</li>
            <li>• <strong>字符集选择:</strong> 选择包含的字符类型</li>
            <li>• <strong>特殊符号:</strong> 包含常用的特殊字符和符号</li>
            <li>• <strong>安全提示:</strong> 生成的字符串仅用于演示，重要密码请使用专业工具</li>
          </ul>
        </div>
      </div>
    </div>
  )
}
